﻿@{
    ViewBag.Title = "Home Page";
}

<div style="width: 1130px; color: #ffffff; font-size: 26pt; ">
    <div style="background-color: #1F4384; height: 120px;">
        <div style="float: left; width: 300px;">
            <div style="margin-left: 40px; margin-top: 26px; font-size: 12pt; margin-bottom: -8px;">Balance</div>
            <div style="margin-left: 40px;">
                <div style="float: left; border: solid 0px;">+358</div>
                <div style="float: left; margin-left: 6px;"><img src="~/Content/images/banana-icon32.png" /></div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div style="float: left; width: 404px; text-align: center; height: 120px;">
            <h1 style="color: #ffffff; font-size: 40pt; line-height: 120px; margin-top: 0px; margin-bottom: 0px;">BananaBets</h1>
        </div>
        <div style="float: left; width: 96px; margin-left: -30px;"><img style="margin-top: 10px;" src="~/Content/images/banana-icon96.png" /></div>
        <div style="float: right; width: 300px; text-align: right">
            <div style="margin-right: 40px; margin-top: 26px; font-size: 12pt; text-decoration: underline; margin-bottom: -8px;">Log ud</div>
            <div style="margin-right: 40px;">Michael</div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <!-- Category section -->
    <div style="height: 94px; color: #1F4384; font-size: 12pt; vertical-align: middle;">
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img style="width: 48px;" src="~/Content/images/Sports-Football-2-glow-icon128.png" />
            </div>
            <div>
                Fodbold
            </div>
        </div>
        <div style="float: left; margin-left: 32px; margin-top: 12px;">
            <div style="text-align: center;">
                <img style=" width: 48px;" src="~/Content/images/Hands-Four-fingers-icon128.png" />
            </div>
            <div>
                Politik
            </div>
        </div>
        <div style="float: left; margin-left: 32px; margin-top: 12px;">
            <div style="text-align: center;">
                <img style=" width: 48px;" src="~/Content/images/Shopping-Price-tag-icon128.png" />
            </div>
            <div>
                Andet
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="blueLine"></div>
    <!-- Bets -->
    <!-- Dummy Bet 1 -->
    <div class="bet selectable" style="height: 60px; color: #1F4384; font-size: 16pt; vertical-align: middle; text-align: left;">
        <div style="float: left; margin-left: 40px; margin-top: 12px; width: 50px; font-size: 10pt;">
            20 mar 20:45
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px; width: 380px;">
            <div>
                FC Barcelona v Real Madrid
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">33</span>
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">55</span>
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">31</span>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="blueLine"></div>
    <!-- Dummy Bet 2-->   
    <div class="bet selectable" style="height: 60px; color: #1F4384; font-size: 16pt; vertical-align: middle; text-align: left;">
        <div style="float: left; margin-left: 40px; margin-top: 12px; width: 50px; font-size: 10pt;">
            20 mar 20:45
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px; width: 380px;">
            <div>
                Chelsea FC v Liverpool FC
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;" class="betValue" data-bet-value="28" data-bet-title="Chelsea FC v Liverpool FC" data-bet-outcome="Chelsea FC">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">28</span>
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;" class="betValue" data-bet-value="45" data-bet-title="Chelsea FC v Liverpool FC" data-bet-outcome="Uafgjort">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">45</span>
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;" class="betValue" data-bet-value="51" data-bet-title="Chelsea FC v Liverpool FC" data-bet-outcome="Liverpool FC">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">51</span>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>      
    <div class="blueLine"></div>
    <!-- Dummy Bet 3-->
    <div class="bet selectable" style="height: 60px; color: #1F4384; font-size: 16pt; vertical-align: middle; text-align: left;">
        <div style="float: left; margin-left: 40px; margin-top: 12px; width: 50px; font-size: 10pt;">
            20 mar 20:45
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px; width: 380px;">
            <div>
                Manchester United v Olympiakos FC
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">28</span>
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">45</span>
            </div>
        </div>
        <div style="float: left; margin-left: 40px; margin-top: 12px;">
            <div style="text-align: center;">
                <img src="~/Content/images/banana-icon32.png" /><span style="margin-left: 6px;">51</span>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div> 
    <!-- Footer -->
    <div style="color: #1F4384; font-size: 12pt; margin-top: 24px;">
        <div style="float: left; border: 2px solid #1F4384; padding: 6px; border-radius: 10px;">Aktive væddemål</div>
        <div style="float: left; border: 2px solid #1F4384; padding: 6px; border-radius: 10px; background-color: #1F4384; color:#ffffff; margin-left: 4px;">Mulige væddemål</div>
        <div style="clear: both;"></div>
        <div style="background-color: #1F4384; height: 100px; margin-top: -8px;">
        </div>
    </div>
    <!-- Modal dialog -->
    <div id="dialog-modal" style="border: 2px solid #1F4384; width: 400px; height: 400px; display: none;">
        <p>
            <span id="selectedBetTitle"></span>
        </p>
        <p>
            Resultat:<span id="selectedBetOutcome"></span>
        </p>
        <p>
            Odds: <span id="selectedBetValue"></span>
        </p>
        <p>
            Indskud: <span id="selectedBetAmount">100</span>
        </p>
        <div class="blueLine"></div>
        <div>
            Venner
        </div>
        <div class="blueLine"></div>
        <div class="friend">
            <div style="float: left; width: 100px;">Peter</div>
            <div class="inviteAction" style="float: left; text-decoration: underline;">Invitér</div>
            <div style="clear: both;"></div>
        </div>
        <div class="friend">
            <div style="float: left; width: 100px;">James</div>
            <div class="inviteAction" style="float: left; text-decoration: underline;">Invitér</div>
            <div style="clear: both;"></div>
        </div>
        <div class="friend">
            <div style="float: left; width: 100px;">John</div>
            <div class="inviteAction" style="float: left; text-decoration: underline;">Invitér</div>
            <div style="clear: both;"></div>
        </div>        
    </div>
</div>